<template>
  <div class="hello">
    <span class="back" @click="onClickBack"></span>
    {{title}}
  </div>
</template>

<script>
export default {
  props:{
    title:String
  },

  data () {
    return {

    }
  },
  methods:{
    onClickBack () {

        this.$router ? this.$router.back() : window.history.back()

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
  .hello{
    background: #fff;
    color: #333333;
    font-size: 18px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    align-items: center;
    height: 43px;

    justify-content: center;
    box-shadow:0 0.053333rem 0rem 3px #f4f4f4;
  }
  .back{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../assets/images/back_white.png") no-repeat center;
    position: absolute;
    left: 16px;
  }
</style>
